<template>
<div class="TeaInfManage">
    <v-headMenu></v-headMenu>

    <div class="notice">
      <div class="edit" v-show="isEdit">
        <h1>修改教师信息</h1>
        <div class="nav">
          <van-field v-model="editData.account" type="text" label="教师编号" :placeholder="editData.account" readonly />
          <van-field v-model="editData.username" type="text" label="姓  名" :placeholder="editData.username" />
          <div class="option">
            <span style="width:4em;text-align:left;">教授课程</span>
            <select v-model="editData.subject" @change="getSubjectMethod($event)">
              <option :value="editData.subject" selected disabled hidden>{{editData.subject}}</option>
              <option value="语文">语  文</option>
              <option value="数学">数  学</option>
              <option value="化学">化  学</option>
            </select>
          </div>
          <div class="option">
            <span style="width:4em;text-align:left;">权 限</span>
            <select v-model="editData.permission" @change="getPermissionMethod($event)">
              <option :value="editData.permission" selected disabled hidden>{{editData.permission}}</option>
              <option value="教师">教 师</option>
              <option value="管理员">管理员</option>
              <option value="超级管理员">超级管理员</option>
            </select>
          </div>
          <van-button round type="info" color="#055383" @click="edit" style="width:80px;margin:10px 20px 0 0">确认</van-button>
          <van-button round type="info" color="#055383" @click="back" style="width:80px;margin:10px 0 0 20px">取消</van-button>
        </div>
      </div>
      <div class="del" v-show="isDel">
        <h1>删除教师信息</h1>
        <div class="nav">
          <van-field v-model="editData.account" type="text" label="教师编号" :placeholder="editData.account" readonly />
          <van-field v-model="editData.username" type="text" label="姓  名" :placeholder="editData.username" readonly />
          <van-field v-model="editData.subject" type="text" label="教授课程" :placeholder="editData.subject" readonly />
          <van-field v-model="editData.permission" type="text" label="权 限" :placeholder="editData.permission" readonly />
        </div>
          <van-button round type="info" color="#055383" @click="del" style="width:80px;margin:10px 20px 0 0">确认</van-button>
          <van-button round type="info" color="#055383" @click="back" style="width:80px;margin:10px 0 0 20px">取消</van-button>
      </div>
      <div id="fuzzy">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="教师编号" prop="account"></el-table-column>
          <el-table-column label="姓名" prop="username"> </el-table-column>
          <el-table-column label="学科" prop="subject"> </el-table-column>
          <el-table-column label="权限" prop="permission"> </el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input v-model="searchData" size="mini" placeholder="输入关键字搜索" @input='search()' class="input-with-select">
                <el-select v-model="searchType" slot="prepend" placeholder="姓名" style="width:80px;">
                  <el-option label="教师编号" value="account"></el-option>
                  <el-option label="姓 名" value="username"></el-option>
                  <el-option label="学科" value="subject"></el-option>
                  <el-option label="权限" value="permission"></el-option>
                </el-select>  
              </el-input>
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="count">
        </el-pagination>
      </div>
    </div>
</div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getTeacherList, edit, del } from "../../api/user";
import { Toast } from "vant";
export default {
    data (){
      return {
        teaData: [],
        tableData: [],
        editData: [],
        searchData: '',
        searchType: 'username',
        isEdit: false,
        isDel: false,

        offset: 0,
        limit: 10,
        count: 0,
        currentPage: 1,
      }
    },
    created (){
      this.getTeacherList()
    },
    components: {
        'v-headMenu': headMenu
    },
    methods: {
      async getTeacherList(condition){
        await getTeacherList(condition)
          .then((res) => {
              console.log(res);
              this.teaData = res.tea
              this.count = this.teaData.length
              this.tableData = this.teaData.slice(0, 10)
          })
      },
      search(){
        this.getTeacherList({
          searchType: this.searchType,
          searchData: this.searchData
        })
      },
      handleEdit(index, row) {
        // console.log(index, row);
        this.isEdit = true
        this.editData = row
        document.getElementById('fuzzy').style.filter = 'blur(2.5px)'
        document.getElementById('fuzzy').style.pointerEvents = 'none'
      },
      handleDelete(index, row) {
        // console.log(index, row);
        this.isDel = true
        this.editData = row
        document.getElementById('fuzzy').style.filter = 'blur(2.5px)'
        document.getElementById('fuzzy').style.pointerEvents = 'none'
      },
      async edit(){
        console.log(this.editData);
        await edit(this.editData)
          .then((res) => {
            Toast(res.msg);
          })
        this.back()
      },
      async del(){
        console.log(this.editData);
        await del(this.editData)
          .then((res) => {
            Toast(res.msg);
          })
        this.getTeacherList()
        this.back()
      },
      back() {
        this.isEdit = false
        this.isDel = false
        this.editData = []
        document.getElementById('fuzzy').style.filter = 'blur(0px)'
        document.getElementById('fuzzy').style.pointerEvents = 'auto'
      },
      getSubjectMethod: function(event) {
        //获取当前选中的值，并重新赋值
        this.values = event.target.value;
      },
      getPermissionMethod: function(event) {
        //获取当前选中的值，并重新赋值
        this.values = event.target.value;
      },


      handleCurrentChange(val) {
        this.currentPage = val;
        this.offset = (val - 1)*this.limit;
        this.tableData = this.teaData.slice(this.offset, this.offset + 10)
      },
    },
}
</script>

<style lang='stylus'>
.TeaInfManage
  color #666  
  flex 1 1 100%
.notice
  margin 0 10px
  border 1px solid #CCCCCC
  .el-input__inner
    padding-left 5px
    padding-right 10px
  .edit, .del
    position absolute
    width 600px
    height 400px
    background-color #50a3a2
    z-index 99
    left calc(50% - 300px)
    top calc(50% - 200px)
    margin auto
    text-align center
    box-shadow 10px 10px 30px #888
    border-radius 20px
    color white
    .nav
      width 300px
      margin auto
      .van-field, .option
        display flex
        appearance none
        outline 0
        border 1px solid #ffffff66
        background-color #ffffff33
        border-radius 3px
        margin-top 10px
        font-size 18px
        .van-field__label
          width 4em
        .van-field__body:hover
            background-color #ffffff66
      .option
        padding 10px 16px
        select
          margin-left 0.5em
          background-color #ffffff33
          border none
          width 187px 
          option
            color #666
</style>